<template>
    <Dropdown @on-click="handleClick" transfer :placement="placement">
        <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)"
           :style="{textAlign: !hideTitle ? 'left' : ''}">
            <common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/>
            <span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span>
            <Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/>
        </a>
        <DropdownMenu slot="list">
            <template v-for="child in children">
                <collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child"
                                :key="`drop-${child.name}`"></collapsed-menu>
                <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name">
                    <common-icon :size="iconSize" :type="child.icon"/>
                    <span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
            </template>
        </DropdownMenu>
    </Dropdown>
</template>
<script>
    import mixin from './mixin';
    import itemMixin from './item-mixin';

    export default {
        name: 'CollapsedMenu',
        mixins: [mixin, itemMixin],
        props: {
            hideTitle: {
                type: Boolean,
                default: false
            },
            rootIconSize: {
                type: Number,
                default: 16
            }
        },
        data() {
            return {
                placement: 'right-end'
            };
        },
        methods: {
            handleClick(name) {
                this.$emit('on-click', name);
            },
            handleMousemove(event, children) {
                const {pageY} = event;
                const height = children.length * 38;
                const isOverflow = pageY + height < window.innerHeight;
                this.placement = isOverflow ? 'right-start' : 'right-end';
            }
        }
    };
</script>
